<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="600px">
    <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="100px">
      <el-form-item label="服务商编码"  prop="seproCode">
        <el-input v-model="form.seproCode" style="width: 450px;"/>
      </el-form-item>

      <el-form-item label="服务商分类"  prop="seproId">
       <el-select v-model="form.seproId" placeholder="服务商分类" v-on:change="indexSelect($event)">
           <el-option v-for="(item,index) in seproItem" :key="index" :label="item.label" :value="item.id">
           </el-option>
      </el-select>
      </el-form-item>
      <!-- <el-form-item label="服务商分类*id" >
        <el-input v-model="form.seproId" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="服务商分类名称" >
        <el-input v-model="form.seproItemName" style="width: 370px;"/>
      </el-form-item> -->
      <el-form-item label="服务商简称"   prop="seproRefeName">
        <el-input v-model="form.seproRefeName" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="服务商全称"  prop="seproName">
        <el-input v-model="form.seproName" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="邮政编码"  >
        <el-input v-model="form.postalCode" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="详细地址"  prop="address">
        <el-input v-model="form.address" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="联系人"  prop="contact">
        <el-input v-model="form.contact" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="电子邮箱"  prop="email">
        <el-input v-model="form.email" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="手机号码"  prop="phone">
        <el-input v-model="form.phone" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="单位性质"  prop="companyItemId">
       <el-select v-model="form.companyItemId" placeholder="单位性质" v-on:change="indexSelect($event)">
           <el-option v-for="(item,index) in comItem" :key="index" :label="item.label" :value="item.id">
           </el-option>
      </el-select>
      </el-form-item>
      <!-- <el-form-item label="单位性质*id" >
        <el-input v-model="form.companyItemId" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="单位性质*名称" >
        <el-input v-model="form.companyItemName" style="width: 370px;"/>
      </el-form-item> -->
      <el-form-item label="注册资金（万元）"  prop="registeredCapital">
        <el-input v-model="form.registeredCapital" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="法定代表人"  prop="head">
        <el-input v-model="form.head" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="服务范围"  prop="serviceScope">
        <el-input v-model="form.serviceScope" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="服务内容"  prop="serviceContent">
        <el-input v-model="form.serviceContent" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="form.remark" style="width: 450px;"/>
      </el-form-item>
      <el-form-item label="状态"  prop="state">
        <el-radio v-for="item in dicts" :key="item.id" v-model="form.state" :label="item.id">{{ item.name }}</el-radio>
      </el-form-item>
      
      <el-form-item label="附件上传" >
          <el-upload style="width: 450px;padding-left:0px"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" v-show="isView===true" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import { add, edit } from "@/api/tServiceproviderInfo";
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    isView: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!this.isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    const validEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入邮箱地址"));
      } else if (!this.isvalidEmail(value)) {
        callback(new Error("请输入正确的邮箱地址"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      dialog: false,
      form: {
        id: "",
        seproCode: "",
        seproId: "",
        seproItemName: "",
        seproRefeName: "",
        seproName: "",
        postalCode: "",
        address: "",
        contact: "",
        email: "",
        phone: "",
        companyItemId: "",
        companyItemName: "",
        registeredCapital: "",
        head: "",
        serviceScope: "",
        serviceContent: "",
        remark: "",
        state: 1
      },
      dicts: [
        {
          id: 1,
          name: "有效"
        },
        {
          id: 2,
          name: "无效"
        }
      ],
      seproItem: [],
      comItem: [],
      rules: {
        seproCode: [
          { required: true, message: "请输入服务商编码", trigger: "blur" }
        ],
        seproId: [
          { required: true, message: "请选择服务商分类", trigger: "blur" }
        ],
        seproRefeName: [
          { required: true, message: "请输入服务商简称", trigger: "blur" }
        ],
        seproName: [
          { required: true, message: "请输入服务商全称", trigger: "blur" }
        ],
        // postalCode: [
        //   { required: true, message: "请输入邮政编码", trigger: "blur" }
        // ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        email: [{ required: true, validator: validEmail, trigger: "blur" }],
        phone: [{ required: true, validator: validPhone, trigger: "blur" }],
        companyItemId: [
          { required: true, message: "请选择单位性质", trigger: "blur" }
        ],
        registeredCapital: [
          { required: true, message: "请输入注册资金", trigger: "blur" }
        ],
        head: [
          { required: true, message: "请输入主要负责人", trigger: "blur" }
        ],
        serviceScope: [
          { required: true, message: "请输入服务范围", trigger: "blur" }
        ],
        serviceContent: [
          { required: true, message: "请输入服务内容", trigger: "blur" }
        ],
        state: [{ required: true, message: "请选择状态", trigger: "blur" }]
      }
    };
  },
  mounted: function() {
    this.byNameinfo("服务商类型", this.seproItem);
    this.byNameCominfo("单位性质", this.comItem);
  },
  methods: {
    handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
    },

    isvalidEmail(str) {
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      return reg.test(str);
    },

    isvalidPhone(str) {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      return reg.test(str);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    byNameinfo(name, seproItem) {
      this.byName(name).then(res => {
        this.bydictId(res.id).then(resobject => {
          this.seproItem = resobject;
          //根据id再进行全部查询
        });
        //根据id再进行全部查询
      });
    },
    byNameCominfo(name, comItem) {
      this.byName(name).then(res => {
        this.bydictId(res.id).then(resobject => {
          this.comItem = resobject;
          //根据id再进行全部查询
        });
        //根据id再进行全部查询
      });
    },
    // 获取id值
    byName(name) {
      return request({
        url: "api/dict/byName/" + name,
        method: "get"
      });
    },
    // 获取id值
    bydictId(id) {
      return request({
        url: "api/dictDetail/findByDeptId/" + id,
        method: "get"
      });
    },
    indexSelect(event) {},
    cancel() {
      this.resetForm();
    },
    doSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.isAdd) {
            this.doAdd();
          } else this.doEdit();
        } else {
          return false;
        }
      });
    },
    doAdd() {
      add(this.form)
        .then(res => {
          this.resetForm();
          this.$notify({
            title: "添加成功",
            type: "success",
            duration: 2500
          });
          this.loading = false;
          this.$parent.$parent.init();
        })
        .catch(err => {
          this.loading = false;
          console.log(err.response.data.message);
        });
    },
    doEdit() {
      edit(this.form)
        .then(res => {
          this.resetForm();
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500
          });
          this.loading = false;
          this.sup_this.init();
        })
        .catch(err => {
          this.loading = false;
          console.log(err.response.data.message);
        });
    },
    resetForm() {
      this.dialog = false;
      this.$refs["form"].resetFields();
      this.form = {
        id: "",
        seproCode: "",
        seproId: "",
        seproItemName: "",
        seproRefeName: "",
        seproName: "",
        postalCode: "",
        address: "",
        contact: "",
        email: "",
        phone: "",
        companyItemId: "",
        companyItemName: "",
        registeredCapital: "",
        head: "",
        serviceScope: "",
        serviceContent: "",
        remark: "",
        state: ""
      };
    }
  }
};
</script>

<style scoped>
</style>
